import React from 'react';
import { Card, Table, Divider ,Modal, Button, Form, Input,InputNumber, Radio, DatePicker,Select, Icon, Upload, message ,Pagination,Spin} from 'antd';
import moment from 'moment';
import { NavLink} from 'react-router-dom';
import ResizeableTitle from './../../../utils/resizeableTitle';
import SelUserDept from './../../../components/SelUserDept';
import Utils from './../../../utils/utils';
import './../../../style/style.css';
import './index.less';
import Axios from "../../../axios";
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea;

export default class YearTrainPlan extends React.Component {
    state = {
        columns: [{
            title: '培训标题',
            dataIndex: 'title',
            width: 200,
        }, {
            title: '培训内容',
            dataIndex: 'content',
            width: 200,
        }, {
            title: '培训时间',
            dataIndex: 'trainTime',
            width: 200,
        }, {
            title: '实施时间',
            dataIndex: 'implementTime',
            width: 200,
        },{
            title: '负责人',
            dataIndex: 'principalUserName',
            width: 150,
        }, {
            title: '培训方式',
            dataIndex: 'type',
            width: 150,
        }, {
            title: '培训对象',
            dataIndex: 'userSelectionValue',
            width: 200,
        }, {
            title: '状态',
            dataIndex: 'state',
            width: 100,
            render: (text, record,index) => (
                <span>
                    {record.state == "VALID" ? <span className="txt-success">审批通过</span> : ''}
                    {record.state == "INVALID" ? <span className="txt-danger">审批拒绝</span> : ''}
                    {record.state == "DISABLE" ? <span className="txt-danger">禁用的</span> : ''}
                    {record.state == "DELETE" ? <span className="txt-danger">删除的</span> : ''}
                    {record.state == "WAIT_AUDIT" ? <span className="txt-danger">待审核</span> : ''}
                    {record.state == "UNDER_REVIEW" ? <span className="txt-danger">审核中</span> : ''}
                </span>
            )
        },{
            title: '操作',
            key: 'action',
            render: (text, record,index) => (
                <span>
                    {record.state == "WAIT_AUDIT" ?
                        <span>
                            <a onClick={() => this.handleUpdate(record)} className="btn-txt-primary">修改</a>
                            <Divider type="vertical" />
                            <a onClick={() => this.handleDel(record)} className="btn-txt-danger">删除</a>
                        </span>
                        : ''
                    }
                    {record.state == "VALID" ?
                        <span>
                            <a onClick={() => this.handleCreatePlanImp(record)} className="btn-txt-primary">培训实施</a>
                        </span>
                        : ''
                    }
                </span>
            ),
        }],
        createPlanModal:{
            visible: false,
            confirmLoading: false,
        },
        updatePlanModal:{
            visible: false,
            confirmLoading: false,
        },
        createPlanApprovalModal:{
            visible: false,
            confirmLoading: false,
        },
        createPlanImpModal:{
            visible: false,
            confirmLoading: false,
        },
    };
    initParams={
        max:10,
        keywords:'',
        state:'ALL',
        page:1,
    }
    componentWillMount(){
        let params = Utils.FilterParam(this.initParams); //过滤掉为空的参数
        this.listRequest(params);//获取列表数据
        this.userRequest();//查询所有用户
        //this.allDeviceRequest();//查询所有设备简单信息列表请求
    }
    //搜索计划
    handleFilter = (fieldsValue)=>{
        const values = {
            ...fieldsValue,
        };
        let params = {
            ...this.initParams,
            ...values,
            page:1,
        }
        params = Utils.FilterParam(params); //过滤掉为空的参数
        this.listRequest(params);
    }
    //创建计划
    handleCreatePlan = ()=>{
        this.setState({
            createPlanModal:{
                ...this.state.createPlanModal,
                visible:true
            }
        })
    }
    //创建计划 确定
    handleCreatePlanSubmit = ()=>{
        const _form = this.createPlanForm.props.form;
        _form.validateFields((err, values) => {
            console.log(values);
            if (err) {
                return;
            }
            console.log(values);
            values.trainTime = moment(values.trainTime).format("YYYY-MM-DD HH:mm:ss");
            values.implementTime  = moment(values.implementTime ).format("YYYY-MM-DD HH:mm:ss");
            values.principalUserId = values.principalUserIdName.key;
            values.principalUserName = values.principalUserIdName.label;
            let userSelection = values.userSelection||[];
            let namesArr = [];
            let namesTxt = ""
            userSelection.option.map((item,index)=>{
                namesArr.push(item.props.children)
                if (index+1<userSelection.option.length){
                    namesTxt+=item.props.children+"、";
                } else {
                    namesTxt+=item.props.children;
                }
            })
            let _userSelection = {
                type:userSelection.type,
                ids:userSelection.ids,
                names:JSON.stringify(namesArr),
            }
            values.userSelection = JSON.stringify(_userSelection);
            values.userSelectionValue = namesTxt;
            delete values.principalUserIdName;
            let param = Utils.FilterParam(values);
           // console.log(param)
            this.createPlanRequest(param);
        });
    }
    //修改计划
    handleUpdate = (record)=>{
        this.setState({
            updatePlanModal:{
                ...this.state.updatePlanModal,
                visible:true,
                record
            }
        })
    }
    //修改计划 确定
    handleUpdatePlanSubmit = ()=>{
        const _form = this.updatePlanForm.props.form;
        _form.validateFields((err, values) => {
            console.log(values);
            if (err) {
                return;
            }
            console.log(values);
            values.trainTime = moment(values.trainTime).format("YYYY-MM-DD HH:mm:ss");
            values.implementTime  = moment(values.implementTime ).format("YYYY-MM-DD HH:mm:ss");
            values.principalUserId = values.principalUserIdName.key;
            values.principalUserName = values.principalUserIdName.label;
            let userSelection = values.userSelection||[];
            let namesArr = [];
            let namesTxt = ""
            userSelection.option.map((item,index)=>{
                namesArr.push(item.props.children)
                if (index+1<userSelection.option.length){
                    namesTxt+=item.props.children+"、";
                } else {
                    namesTxt+=item.props.children;
                }
            })
            let _userSelection = {
                type:userSelection.type,
                ids:userSelection.ids,
                names:JSON.stringify(namesArr),
            }
            values.userSelection = JSON.stringify(_userSelection);
            values.userSelectionValue = namesTxt;
            delete values.principalUserIdName;
            let param = Utils.FilterParam(values);
            //console.log(param)
            this.updatePlanRequest(param);
        });
    }
    //删除计划
    handleDel = (record)=>{
        Modal.confirm({
            title: '确认删除？',
            content: <div>
                <div>删除后数据不可恢复！</div>
                <div className="txt-danger">确认删除？</div>
            </div>,
            okText:'确认',
            cancelText:'取消',
            onOk:()=>{
                let params = {
                    id:record.id
                }
                this.delRequest(params)
            }
        })
    }
    //培训实施 弹窗
    handleCreatePlanImp = (record)=>{
        this.setState({
            createPlanImpModal:{
                ...this.state.createPlanImpModal,
                visible:true,
                record
            }
        })
    }
    //培训实施 确定提交
    handleCreatePlanImpSubmit = ()=>{
        const _form = this.createPlanImpForm.props.form;
        _form.validateFields((err, values) => {
            console.log(values);
            if (err) {
                return;
            }
            values.trainTime = moment(values.trainTime).format("YYYY-MM-DD HH:mm:ss");
            values.principalId = values.principalObj.key;
            values.principal = values.principalObj.label;
            delete values.principalObj;
            let param = Utils.FilterParam(values);
            console.log(param)
            this.createPlanImpRequest(param);
        });
    }

    //批量选择计划 提交计划审批
    handleBatchCheck = ()=>{
        const selectedRowKeys =this.state.selectedRowKeys;
        const selectedRows =this.state.selectedRows;
        console.log(selectedRowKeys)
        console.log(selectedRows)
        if (!selectedRowKeys||!selectedRowKeys.length) {
            Modal.error({
                title: '提示信息',
                content: '请先从列表选择培训计划，再提交培训计划审批！',
                //okText:'确认',
                onOk:()=>{
                }
            })
        }else {
            this.setState({
                selectedRows,
                selectedRowKeys
            })
            this.setState({
                createPlanApprovalModal:{
                    ...this.state.createPlanApprovalModal,
                    visible:true
                }
            })
        }

    }
    //计划审批 确定提交
    handleCreatPlanAuditSubmit = ()=>{
        const _form = this.creatPlanAuditForm.props.form;
        _form.validateFields((err, values) => {
            console.log(values);
            if (err) {
                return;
            }
            console.log(values);
            values.planTime = moment(values.planTime).format("YYYY-MM-DD HH:mm:ss");
            values.utpIds = JSON.stringify(values.utpIds);
            let param = Utils.FilterParam(values);
            console.log(param)
            this.createPlanAuditRequest(param);
        });
    }


    /*计划列表数据请求*/
    listRequest = (params)=>{
        let _this = this;
        this.setState({
            loading:true,
            loadingTxt:'加载中...'
        })
        Axios.dataRequest({
            block:'/hr',
            url:'/userTrain/userTrainPlanList',
            params:params,
        }).then((data)=>{
            console.log(data)
            let page = data.page;
            let dataSource = data.data;
            dataSource.map((item)=>{
                item.key = item.id;
                return item;
            })
            this.setState({
                loading:false,
                dataSource,
                pagination: Utils.pagination(page, (current) => {
                    _this.initParams.page = current;
                    let params = this.initParams;
                    _this.listRequest(params);
                },(current,pageSize) =>{
                    _this.initParams.page = current;
                    _this.initParams.max = pageSize;
                    let params = Utils.FilterParam(this.initParams); //过滤掉为空的参数
                    _this.listRequest(params);
                })
            })
        }).catch((error)=>{
            this.setState({ loading:false })
            console.log(error);
        })
    }
    /*创建计划请求*/
    createPlanRequest = (params)=>{
        this.setState({
            createPlanModal:{
                ...this.state.createPlanModal,
                confirmLoading: true,
            }
        })
        Axios.formRequest({
            block:'/hr',
            url:'/userTrain',
            params:params,
        }).then((data)=>{
            console.log(data)
            this.setState({
                createPlanModal:{
                    ...this.state.createPlanModal,
                    visible: false,
                }
            },()=>{
                message.success('创建年度培训计划成功！',2);
                window.location.reload()
            })
        }).catch((error)=>{
            console.log(error);
            this.setState({
                createPlanModal:{
                    ...this.state.createPlanModal,
                    confirmLoading: false,
                }
            })
        })
    }
    /*修改计划请求*/
    updatePlanRequest = (params)=>{
        this.setState({
            updatePlanModal:{
                ...this.state.updatePlanModal,
                confirmLoading: true,
            }
        })
        Axios.formPutRequest({
            block:'/hr',
            url:'/userTrain',
            params:params,
        }).then((data)=>{
            console.log(data)
            this.setState({
                updatePlanModal:{
                    ...this.state.updatePlanModal,
                    confirmLoading: false,
                    visible: false,
                }
            },()=>{
                message.success('修改培训计划成功！',2,()=>{
                    //window.location.reload()
                });
                let params = Utils.FilterParam(params); //过滤掉为空的参数
                this.listRequest(params);
            })
        }).catch((error)=>{
            console.log(error);
            this.setState({
                updatePlanModal:{
                    ...this.state.updatePlanModal,
                    confirmLoading: false,
                }
            })
        })
    }
    /*删除请求*/
    delRequest = (params)=>{
        this.setState({
            loading:true,
            loadingTxt:'删除中...'
        })
        Axios.delRequest({
            block:'/hr',
            url:'/userTrain',
            params:params,
        }).then((data)=>{
            console.log(data);
            this.setState({ loading:false })
            message.success('删除成功！',2,()=>{
                let params = Utils.FilterParam(params); //过滤掉为空的参数
                this.listRequest(params);
            });
        }).catch((error)=>{
            this.setState({ loading:false })
            console.log(error);
        })
    }
    /*计划审批*/
    createPlanAuditRequest = (params)=>{
        this.setState({
            createPlanApprovalModal:{
                ...this.state.createPlanApprovalModal,
                confirmLoading: true,
            }
        })
        Axios.formRequest({
            block:'/hr',
            url:'/userTrain/planApply',
            params:params,
        }).then((data)=>{
            console.log(data)
            this.setState({
                createPlanApprovalModal:{
                    ...this.state.createPlanApprovalModal,
                    visible: false,
                }
            },()=>{
                message.success('提交培训计划审批成功，请到培训计划审批记录查看！',2,()=>{
                    window.location.reload();
                });
                /*let params = Utils.FilterParam(params); //过滤掉为空的参数
                this.listRequest(params);*/
            })
        }).catch((error)=>{
            console.log(error);
            this.setState({
                createPlanApprovalModal:{
                    ...this.state.createPlanApprovalModal,
                    confirmLoading: false,
                }
            })
        })
    }
    /*创建计划实施请求*/
    createPlanImpRequest = (params)=>{
        this.setState({
            createPlanImpModal:{
                ...this.state.createPlanImpModal,
                confirmLoading: true,
            }
        })
        Axios.formRequest({
            block:'/hr',
            url:'/userTrain/train',
            params:params,
        }).then((data)=>{
            console.log(data)
            this.setState({
                createPlanImpModal:{
                    ...this.state.createPlanImpModal,
                    visible: false,
                }
            },()=>{
                message.success('创建培训计划实施成功！，请到培训计划实施列表查看',2,()=>{
                    //window.location.reload()
                });
                window.location.reload();
            })
        }).catch((error)=>{
            console.log(error);
            this.setState({
                createPlanImpModal:{
                    ...this.state.createPlanImpModal,
                    confirmLoading: false,
                }
            })
        })
    }

    /*所有用户请求*/
    userRequest = ()=>{
        Axios.dataRequest({
            block:'/hr',
            url:'/user/allUserSmallInfos',
            params:"",
        }).then((data)=>{
            console.log(data)
            let users = data.data;
            /*id name userNo*/
            this.setState({
                users,
            })
        }).catch((error)=>{
            console.log(error);
        })
    }

    components = {
        header: {
            cell:ResizeableTitle
        },
    };
    handleResize = index => (e, { size }) => {
        this.setState(({ columns }) => {
            const nextColumns = [...columns];
            nextColumns[index] = {
                ...nextColumns[index],
                width: size.width,
            };
            return { columns: nextColumns };
        });
    };
    render() {
        //伸缩列
        const columns = this.state.columns.map((col, index) => ({
            ...col,
            onHeaderCell: column => ({
                width: column.width,
                onResize: this.handleResize(index),
            }),
        }));
        //复选框属性
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                this.setState({
                    selectedRowKeys,
                    selectedRows
                })
            },
            //选择框的默认属性配置
            getCheckboxProps: record => ({
                disabled: record.state === 'VALID' || record.state==='INVALID'|| record.state==='DISABLE'|| record.state==='DELETE'|| record.state==='UNDER_REVIEW',
            }),
        };
        return (
            <Spin spinning={this.state.loading} size="large" tip={this.state.loadingTxt}>
                <div className="tab-list-box">
                    <Card title="年度培训计划列表">
                        <div className="filter-box" style={{marginBottom:15}}>
                            <FilterForm filterSubmit={(fieldsValue)=>{this.handleFilter(fieldsValue)}}/>
                            <div>
                                <NavLink className="btn-txt-primary" to={'/organMember/user/yearTrainPlanAplRecord'} style={{marginRight:15}}>培训计划审批记录</NavLink>
                                <Button type="primary" icon="clock-circle" onClick={this.handleBatchCheck} style={{marginRight:15}}>培训计划审批</Button>
                                <Button type="primary" icon="plus" onClick={this.handleCreatePlan}>创建培训计划</Button>
                            </div>
                        </div>
                        <Table
                            bordered
                            rowSelection={rowSelection}
                            components={this.components}
                            columns={columns}
                            dataSource={this.state.dataSource}
                            pagination={this.state.pagination}
                        />
                    </Card>
                    <Modal title="创建年度培训计划"
                           visible={this.state.createPlanModal.visible}
                           onOk={this.handleCreatePlanSubmit}
                           okText="确定"
                           confirmLoading={this.state.createPlanModal.confirmLoading}
                           destroyOnClose={true}
                           onCancel={()=>{
                               this.setState({
                                   createPlanModal:{
                                       visible:false
                                   }
                               })
                           }}
                    >
                        <CreatePlanForm users={this.state.users} wrappedComponentRef={(createPlanForm)=>{this.createPlanForm = createPlanForm;}}/>
                    </Modal>
                    <Modal title="修改年度培训计划"
                           visible={this.state.updatePlanModal.visible}
                           onOk={this.handleUpdatePlanSubmit}
                           okText="确定"
                           confirmLoading={this.state.updatePlanModal.confirmLoading}
                           destroyOnClose={true}
                           onCancel={()=>{
                               this.setState({
                                   updatePlanModal:{
                                       visible:false
                                   }
                               })
                           }}
                    >
                        <UpdatePlanForm users={this.state.users} record={this.state.updatePlanModal.record} wrappedComponentRef={(updatePlanForm)=>{this.updatePlanForm = updatePlanForm;}}/>
                    </Modal>
                    <Modal title="年度培训计划审批"
                           visible={this.state.createPlanApprovalModal.visible}
                           onOk={this.handleCreatPlanAuditSubmit}
                           okText="提交"
                           destroyOnClose={true}
                           confirmLoading={this.state.createPlanApprovalModal.confirmLoading}
                           onCancel={()=>{
                               this.setState({
                                   createPlanApprovalModal:{
                                       visible:false
                                   }
                               })
                           }}
                    >
                        <CreatPlanAuditForm selectedRowKeys={this.state.selectedRowKeys} wrappedComponentRef={(creatPlanAuditForm)=>{this.creatPlanAuditForm = creatPlanAuditForm;}}/>
                    </Modal>
                    <Modal title="创建培训计划实施"
                           width={850}
                           visible={this.state.createPlanImpModal.visible}
                           onOk={this.handleCreatePlanImpSubmit}
                           okText="提交"
                           destroyOnClose={true}
                           confirmLoading={this.state.createPlanImpModal.confirmLoading}
                           onCancel={()=>{
                               this.setState({
                                   createPlanImpModal:{
                                       visible:false
                                   }
                               })
                           }}
                    >
                        <CreatePlanImpForm
                            users={this.state.users}
                            record={this.state.createPlanImpModal.record}
                            wrappedComponentRef={(createPlanImpForm)=>{this.createPlanImpForm = createPlanImpForm;}}/>
                    </Modal>
                </div>
            </Spin>
        );
    }
}

//创建计划表单
class CreatePlanForm extends React.Component{
    getInfo = (info)=>{
        console.log(info)
        if (info.ids!=undefined&&info.ids!="undefined"){
            this.setState({
                userDeptInfo:info,
            },()=>{
                this.props.form.setFieldsValue({
                    userSelection: this.state.userDeptInfo,
                });
            })
        }
        if (info.ids==undefined||info.ids=="undefined"||info.option.length==0) {
            this.setState({
                userDeptInfo:null,
            },()=>{
                this.props.form.setFieldsValue({
                    userSelection: null
                });
            })
        }
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 16}
        };
        const userSelection = this.props.userSelection||"";
        const users = this.props.users || [];
        const userOptions = users.map((item)=>{
            return <Option key={item.id}>{item.name}</Option>;
        });
        return (
            <Form>
                <FormItem label="培训标题" {...formItemLayout}>
                    {
                        getFieldDecorator('title',{
                            rules: [{ required: true, message: '请填写培训标题!' }],
                        })(
                            <TextArea placeholder="培训标题" autosize/>
                        )
                    }
                </FormItem>
                <FormItem label="培训内容" {...formItemLayout}>
                    {
                        getFieldDecorator('content',{
                            rules: [{ required: true, message: '请填写培训内容!' }],
                        })(
                            <TextArea placeholder="培训内容" autosize/>
                        )
                    }
                </FormItem>
                <FormItem label="培训时间" {...formItemLayout}>
                    {
                        getFieldDecorator('trainTime', {
                            rules: [{ required: true, message: '请选择培训时间!' }],
                        })(
                            <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} placeholder="培训时间"/>
                        )
                    }
                </FormItem>
                <FormItem label="实施时间" {...formItemLayout}>
                    {
                        getFieldDecorator('implementTime', {
                            rules: [{ required: true, message: '请选择实施时间!' }],
                        })(
                            <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} placeholder="实施时间"/>
                        )
                    }
                </FormItem>
                <FormItem label="负责人" {...formItemLayout}>
                    {
                        getFieldDecorator('principalUserIdName',{
                            rules: [{ required: true, message: '请选择负责人!' }],
                        })(
                            <Select
                                placeholder="负责人"
                                labelInValue
                                style={{minWidth: 160}}
                                showSearch
                                optionFilterProp="children"
                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            >
                                {userOptions}
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="培训方式" {...formItemLayout}>
                    {
                        getFieldDecorator('type', {
                            rules: [{ required: true, message: '请选择培训方式!' }],
                        })(
                            <Select placeholder="培训方式">
                                <Option value="内培">内培</Option>
                                <Option value="外培">外培</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="培训对象" {...formItemLayout}>
                    {
                        getFieldDecorator('userSelection',{
                            rules: [{required: true,message: '请选择培训对象!'}],
                            /*initialValue:this.state.userDeptInfo*/
                        })(
                            <div>
                                <Input type="hidden"/>
                                <SelUserDept userSelection={userSelection} getInfo={this.getInfo}/>
                            </div>
                        )
                    }
                </FormItem>
                <FormItem label="备注" {...formItemLayout}>
                    {
                        getFieldDecorator('remark',{
                        })(
                            <TextArea placeholder="备注" autosize/>
                        )
                    }
                </FormItem>
            </Form>
        );
    }
}
CreatePlanForm = Form.create({})(CreatePlanForm);
//修改计划表单
class UpdatePlanForm extends React.Component{
    getInfo = (info)=>{
        console.log(info)
        if (info.ids!=undefined&&info.ids!="undefined"){
            this.setState({
                userDeptInfo:info,
            },()=>{
                this.props.form.setFieldsValue({
                    userSelection: this.state.userDeptInfo,
                });
            })
        }
        if (info.ids==undefined||info.ids=="undefined"||info.option.length==0) {
            this.setState({
                userDeptInfo:null,
            },()=>{
                this.props.form.setFieldsValue({
                    userSelection: null
                });
            })
        }
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 16}
        };
        const record = this.props.record||{};
        const userSelection = this.props.userSelection||"";
        const users = this.props.users || [];
        const userOptions = users.map((item)=>{
            return <Option key={item.id}>{item.name}</Option>;
        });
        return (
            <Form>
                <FormItem label="id" {...formItemLayout} style={{display:"none"}}>
                    {
                        getFieldDecorator('id',{
                            initialValue:record.id
                        })(
                            <Input type="text"/>
                        )
                    }
                </FormItem>
                <FormItem label="培训标题" {...formItemLayout}>
                    {
                        getFieldDecorator('title',{
                            rules: [{ required: true, message: '请填写培训标题!' }],
                            initialValue:record.title
                        })(
                            <TextArea placeholder="培训标题" autosize/>
                        )
                    }
                </FormItem>
                <FormItem label="培训内容" {...formItemLayout}>
                    {
                        getFieldDecorator('content',{
                            rules: [{ required: true, message: '请填写培训内容!' }],
                            initialValue:record.content
                        })(
                            <TextArea placeholder="培训内容" autosize/>
                        )
                    }
                </FormItem>
                <FormItem label="培训时间" {...formItemLayout}>
                    {
                        getFieldDecorator('trainTime', {
                            rules: [{ required: true, message: '请选择培训时间!' }],
                            initialValue:moment(record.trainTime)
                        })(
                            <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} placeholder="培训时间"/>
                        )
                    }
                </FormItem>
                <FormItem label="实施时间" {...formItemLayout}>
                    {
                        getFieldDecorator('implementTime', {
                            rules: [{ required: true, message: '请选择实施时间!' }],
                            initialValue:moment(record.implementTime)
                        })(
                            <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} placeholder="实施时间"/>
                        )
                    }
                </FormItem>
                <FormItem label="负责人" {...formItemLayout}>
                    {
                        getFieldDecorator('principalUserIdName',{
                            rules: [{ required: true, message: '请选择负责人!' }],
                            initialValue:{key:record.principalUserId||"",label:record.principalUserName||""}
                        })(
                            <Select
                                placeholder="负责人"
                                labelInValue
                                style={{minWidth: 160}}
                                showSearch
                                optionFilterProp="children"
                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            >
                                {userOptions}
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="培训方式" {...formItemLayout}>
                    {
                        getFieldDecorator('type', {
                            rules: [{ required: true, message: '请选择培训方式!' }],
                            initialValue:record.type
                        })(
                            <Select placeholder="培训方式">
                                <Option value="内培">内培</Option>
                                <Option value="外培">外培</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="培训对象" {...formItemLayout}>
                    {
                        getFieldDecorator('userSelection',{
                            rules: [{required: true,message: '请选择培训对象!'}],
                            /*initialValue:this.state.userDeptInfo*/
                        })(
                            <div>
                                <Input type="hidden"/>
                                <SelUserDept userSelection={userSelection} getInfo={this.getInfo}/>
                            </div>
                        )
                    }
                </FormItem>
                <FormItem label="备注" {...formItemLayout}>
                    {
                        getFieldDecorator('remark',{
                            initialValue:record.remark
                        })(
                            <TextArea placeholder="备注" autosize/>
                        )
                    }
                </FormItem>
            </Form>
        );
    }
}
UpdatePlanForm = Form.create({})(UpdatePlanForm);
//计划审批
class CreatPlanAuditForm extends React.Component{
    state = {}
    componentWillMount(){
        this.getNoRequest();
    }
    /*获取自定义溯源序号请求*/
    getNoRequest = ()=>{
        let params = {
            key:'yearTrainPlanAuth_no'
        }
        Axios.dataRequest({
            block:'/setting',
            url:'/objectNo/nextNo',
            params:params,
        }).then((data)=>{
            console.log(data)
            let No = data.data;
            this.setState({
                No
            })
        }).catch((error)=>{
            console.log(error);
        })
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 16}
        };
        const No = this.state.No||"";
        const selectedRowKeys = this.props.selectedRowKeys;
        return (
            <Form>
                <FormItem label="培训计划编号列表" {...formItemLayout} style={{display:"none"}}>
                    {
                        getFieldDecorator('utpIds',{
                            initialValue:selectedRowKeys
                        })(
                            <Input type="text" placeholder="培训计划编号列表"/>
                        )
                    }
                </FormItem>
                <FormItem label="标题" {...formItemLayout}>
                    {
                        getFieldDecorator('title',{
                            rules: [{ required: true, message: '请填写标题!' }],
                        })(
                            <Input type="text" placeholder="标题"/>
                        )
                    }
                </FormItem>
                <FormItem label="编号" {...formItemLayout}>
                    {
                        getFieldDecorator('no',{
                            rules: [{ required: true, message: '请填写编号!' }],
                            initialValue:No
                        })(
                            <Input type="text" placeholder="编号"/>
                        )
                    }
                </FormItem>
                <FormItem label="计划时间" {...formItemLayout}>
                    {
                        getFieldDecorator('planTime', {
                            rules: [{ required: true, message: '请选择计划时间!' }],
                        })(
                            <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} placeholder="计划时间"/>
                        )
                    }
                </FormItem>
                <FormItem label="备注" {...formItemLayout}>
                    {
                        getFieldDecorator('remark',{
                        })(
                            <TextArea placeholder="备注" autosize/>
                        )
                    }
                </FormItem>
            </Form>
        );
    }
}
CreatPlanAuditForm = Form.create({})(CreatPlanAuditForm);
//创建计划实施
class CreatePlanImpForm extends React.Component{
    state={}
    componentWillMount(){
        this.getNoRequest();
    }
    //实际溯源时间，默认与证书时间相同
    handleTimeChange = (date,dateString)=>{
        console.log(date)
        console.log(dateString)
        this.props.form.setFieldsValue({
            traceTime: date
        });
    }
    /*获取自定义编号请求*/
    getNoRequest = ()=>{
        let params = {
            key:'yearTrainPlanImplement_no'
        }
        Axios.dataRequest({
            block:'/setting',
            url:'/objectNo/nextNo',
            params:params,
        }).then((data)=>{
            console.log(data)
            let No = data.data;
            this.setState({
                No
            })
        }).catch((error)=>{
            console.log(error);
        })
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {span: 7},
            wrapperCol: {span: 16}
        };
        const record = this.props.record||{};
        const No = this.state.No||"";
        const users = this.props.users || [];
        const userOptions = users.map((item)=>{
            return <Option key={item.id}>{item.name}</Option>;
        });
        return (
            <div className="layout-form">
                <Form className="left-div">
                    <FormItem label="培训计划编号" {...formItemLayout} style={{display:"none"}}>
                        {
                            getFieldDecorator('trainPlanId',{
                                initialValue:record.id
                            })(
                                <Input type="text" placeholder="培训计划编号"/>
                            )
                        }
                    </FormItem>
                    <FormItem label="培训标题" {...formItemLayout}>
                        {
                            getFieldDecorator('title',{
                                rules: [{ required: true, message: '请填写培训标题!' }],
                            })(
                                <TextArea placeholder="培训标题" autosize/>
                            )
                        }
                    </FormItem>
                    <FormItem label="计划实施编号" {...formItemLayout}>
                        {
                            getFieldDecorator('trainNo',{
                                rules: [{ required: true, message: '请填写计划实施编号!' }],
                                initialValue:No
                            })(
                                <Input type="text" placeholder="计划实施编号"/>
                            )
                        }
                    </FormItem>
                    <FormItem label="培训时间" {...formItemLayout}>
                        {
                            getFieldDecorator('trainTime', {
                                rules: [{ required: true, message: '请选择培训时间!' }],
                            })(
                                <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} placeholder="培训时间"/>
                            )
                        }
                    </FormItem>
                    <FormItem label="培训方式" {...formItemLayout}>
                        {
                            getFieldDecorator('type', {
                                rules: [{ required: true, message: '请选择培训方式!' }],
                            })(
                                <Select placeholder="培训方式">
                                    <Option value="内培">内培</Option>
                                    <Option value="外培">外培</Option>
                                </Select>
                            )
                        }
                    </FormItem>
                    <FormItem label="培训老师" {...formItemLayout}>
                        {
                            getFieldDecorator('teacher',{
                                rules: [{ required: true, message: '请填写培训老师!' }],
                            })(
                                <Input type="text" placeholder="培训老师"/>
                            )
                        }
                    </FormItem>
                </Form>
                <Form className="right-div">
                    <FormItem label="培训负责人" {...formItemLayout}>
                        {
                            getFieldDecorator('principalObj',{
                                rules: [{ required: true, message: '请选择培训负责人!' }],
                            })(
                                <Select
                                    placeholder="培训负责人"
                                    labelInValue
                                    style={{minWidth: 160}}
                                    showSearch
                                    optionFilterProp="children"
                                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                >
                                    {userOptions}
                                </Select>
                            )
                        }
                    </FormItem>
                    <FormItem label="培训内容摘要" {...formItemLayout}>
                        {
                            getFieldDecorator('synopsis',{
                            })(
                                <TextArea placeholder="培训内容摘要" autosize/>
                            )
                        }
                    </FormItem>
                    <FormItem label="培训内容" {...formItemLayout}>
                        {
                            getFieldDecorator('content',{
                                rules: [{ required: true, message: '请填写培训内容!' }],
                            })(
                                <TextArea placeholder="培训内容" autosize/>
                            )
                        }
                    </FormItem>
                    <FormItem label="培训地点" {...formItemLayout}>
                        {
                            getFieldDecorator('location',{
                                rules: [{ required: true, message: '请填写培训地点!' }],
                            })(
                                <TextArea placeholder="培训地点" autosize/>
                            )
                        }
                    </FormItem>
                    <FormItem label="备注信息" {...formItemLayout}>
                        {
                            getFieldDecorator('remark',{
                            })(
                                <TextArea placeholder="备注信息" autosize/>
                            )
                        }
                    </FormItem>
                </Form>
            </div>
        );
    }
}
CreatePlanImpForm = Form.create({})(CreatePlanImpForm);

//搜索表单
class FilterForm extends React.Component{
    handleFilterSubmit = ()=>{
        let fieldsValue = this.props.form.getFieldsValue();
        this.props.filterSubmit(fieldsValue);
    }
    //重置
    reset = ()=>{
        this.props.form.resetFields();
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        return (
            <Form layout="inline">
                <FormItem label="关键字">
                    {
                        getFieldDecorator('keywords',{
                        })(
                            <Input type="text" placeholder="关键字"/>
                        )
                    }
                </FormItem>
                <FormItem label="状态">
                    {
                        getFieldDecorator('state', {
                            initialValue:"ALL"
                        })(
                            <Select placeholder="状态" style={{width:100}}>
                                <Option value="ALL">全部</Option>
                                <Option value="VALID">审核通过</Option>
                                <Option value="INVALID">审核拒绝</Option>
                                <Option value="WAIT_AUDIT">待审核</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type="primary" style={{margin:'0 20px'}} onClick={this.handleFilterSubmit}>查询</Button>
                    <Button onClick={this.reset}>重置</Button>
                </FormItem>
            </Form>
        );
    }
}
FilterForm = Form.create({})(FilterForm);

